<template>
  <div class="review-bar">
    <div class="review-bar-chart">
      <VptBar :chartData="list"
              autoRander
              :xAxisData="xData"
              v-bind="barProps"></VptBar>
    </div>
  </div>
</template>

<script setup>
import VptBar from "@/components/echarts/vpt-bar/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { computed } from "vue";

const props = defineProps({
  barData: { type: Array, default: () => [] },
  // 是否为横屏
  isLandscape: { type: Boolean, default: false },
});

const list = computed(() => {
  return props.barData.length ? [props.barData.map((item) => item.value)] : [];
});

const xData = computed(() => {
  return props.barData.map((item) => item.name);
});

const barProps = computed(() => {
  const otherProps = props.isLandscape ? getOtherBarProps() : {};

  return {
    titleProps: {
      text: "其中：评审通过需求构成",
    },
    yAxisProps: {
      nameTextStyle: {
        fontSize: fontSize(28),
        color: "rgba(255,255,255, 0.5)",
        // fontFamily: "PingFangSC-Regular",
        fontWeight: 400,
      },
    },
    grid: {
      left: fontSize(5),
      top: fontSize(80),
      bottom: fontSize(20),
    },
    color: ["#57C5FF"],
    dataZoom: {
      show: false,
      // endValue: 3
    },
    ...otherProps,
  };
});

const getOtherBarProps = () => {
  return {
    grid: {
      left: fontSize(5),
      top: fontSize(40),
      bottom: fontSize(0),
    },
    titleFontSize: 14,
    xAxisLabelFontSize: 12,
    yAxisLabelFontSize: 14,
    barWidth: 20,
    rotate: 25,
  };
};
</script>

<style lang="less" scoped>
.review-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.12rem 0.16rem;
  box-sizing: border-box;

  .review-bar-header {
    // font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 0.14rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.16rem 0.05rem;
  }

  .review-bar-chart {
    flex: 1;
    height: 0;
  }
}
</style>
